<!-- 修改密码 -->
<template>
   <el-card class="box-card">
     <template #header>
       <div class="card-header">
         <span style="font-weight: bold;">修改密码</span>
       </div>
     </template>
     <div>
      <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="旧密码" prop="password">
      <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item label="新密码" prop="newPass">
      <el-input
        v-model="ruleForm.newPass"
        type="password"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="确认" prop="checkPass">
      <el-input v-model="ruleForm.checkPass" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >修改</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
     </div>
   </el-card>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
 
 const ruleFormRef = ref<FormInstance>()
 const ruleForm = reactive({
   password: '',
   checkPass: '',
   newPass: '',
 })
 
 const rules = reactive({
   password: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
   newPass: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
   checkPass: [{required: true, message: '密码不一致', trigger: 'blur' }],
 })
 
 const submitForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.validate((valid) => {
     if (valid) {
       
     } else {
      
       return false
     }
   })
 }
 
 const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
 }
 </script>
 <style>
 .card-header {
   display: flex;
   align-items: center;
 }
 
 .text {
   font-size: 14px;
 }
 
 .item {
   margin-bottom: 18px;
 }
 
 .box-card {
   width: 600px;
   margin: auto;
 }
 </style>